@import '../../../styles/variables';
@import '../../../styles/mixins';

:global {
  .AnimationExample {
    position:relative;
    width: 100%;
    height: 90px;
    overflow: hidden;
    display: inline-block;
  }

  .AnimationExample-content {
    width: 100%;
    height: 100%;
    border: 1px solid #666;
    padding: 10px;

    hr {
      margin-top: 8px;
      margin-bottom: 8px;
    }

    hr:first-child {
      margin-top: 4px;
    }
  }

  .animationExample_panel {
    position:absolute;
    top:0;
    width:60px;
    height: 100%;
    opacity: 0;
    background-color: $ms-color-themePrimary;

    @include high-contrast {
    background-color: WindowText;
    }
  }

  .docs_animationsTable_body { // override for demo purposes
    .ms-slideRightOut40, .ms-slideLeftOut40, .ms-slideUpOut20, .ms-slideUpOut10,
    .ms-slideDownOut20, .ms-slideDownOut10, .ms-scaleUpOut103, .ms-scaleDownOut98,
    .ms-fadeOut100, .ms-fadeOut200, .ms-fadeOut400, .ms-fadeOut500 {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;

      .animationExample_panel {
        -webkit-animation-play-state: running;
        animation-play-state: running;
        opacity: 1;
      }
    }

    .ms-slideRightOut40, .ms-slideLeftOut40, .ms-slideLeftIn10, .ms-slideLeftIn20, .ms-slideLeftIn40 {
        .animationExample_panel {
            right: 0;
        }
    }
    .ms-slideLeftOut40 {
        .animationExample_panel {
            left: 0;
        }
    }
    .ms-slideUpOut20, .ms-slideUpOut10, .ms-slideDownOut20, .ms-slideDownOut10 {
        .animationExample_panel {
            width: 100%;
            height: 30px;
            top: 0;
        }
    }
    .ms-slideUpOut10, .ms-slideDownOut10 {
        .animationExample_panel {
            width: 60px;
            top: 10px;
            right: 10px;
            height: 20px;
        }
    }
    .ms-slideDownOut10, .ms-slideDownOut20 {
        .animationExample_panel {
            top: 60px;
        }
    }
    .ms-scaleUpIn100,
    .ms-scaleDownIn100,
    .ms-scaleUpOut103,
    .ms-scaleDownOut98 {
        overflow: visible;
        .animationExample_panel {
            height: 100%;
            width: 100%;
            top: 0;
        }
        @-webkit-keyframes scaleUp100 {
            from {
                -webkit-transform: scale3d(0.70, 0.70, 1);
            }

            to {
                -webkit-transform: scale3d(1, 1, 1);
            }
        }

        @keyframes scaleUp100 {
            from {
                transform: scale3d(0.70, 0.70, 1);
            }

            to {
                transform: scale3d(1, 1, 1);
            }
        }
        @-webkit-keyframes scaleDown100 {
            from {
                -webkit-transform: scale3d(1.30, 1.30, 1);
            }

            to {
                -webkit-transform: scale3d(1, 1, 1);
            }
        }

        @keyframes scaleDown100 {
            from {
                transform: scale3d(1.30, 1.30, 1);
            }

            to {
                transform: scale3d(1, 1, 1);
            }
        }
        @-webkit-keyframes scaleUp103 {
            from {
                -webkit-transform: scale3d(1, 1, 1);
            }

            to {
                -webkit-transform: scale3d(1.15, 1.15, 1);
            }
        }
        @keyframes scaleUp103 {
            from {
                transform: scale3d(1, 1, 1);
            }

            to {
                transform: scale3d(1.15, 1.15, 1);
            }
        }
        @-webkit-keyframes scaleDown98 {
            from {
                -webkit-transform: scale3d(1, 1, 1);
            }

            to {
                -webkit-transform: scale3d(0.85, 0.85, 1);
            }
        }

        @keyframes scaleDown98 {
            from {
                transform: scale3d(1, 1, 1);
            }

            to {
                transform: scale3d(0.85, 0.85, 1);
            }
        }
    }

    .ms-fadeIn100, .ms-fadeIn200, .ms-fadeIn400, .ms-fadeIn500 {
        .animationExample_panel {
            height: 100%;
            width: 100%;
            top: 0;
        }
    }

    .ms-fadeOut100, .ms-fadeOut200, .ms-fadeOut400, .ms-fadeOut500 {
        .animationExample_panel {
            height: 100%;
            width: 100%;
            top: 0;
        }
    }
  }
}
